import React, { Component, PropTypes, Children } from 'react';
import classNames from 'classnames';

import './LockScreen.css';

/**
 * 一定時間、画面全体または指定範囲に対する操作を無効化するカバー
 */
class LockScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { doDisplay: props.doDisplay };
  }
  // 操作無効タイマー
  componentDidMount() {
    setTimeout(() => {
      this.setState({ doDisplay: false });
    }, this.props.wait);
  }

  render() {
    const { children } = this.props;
    // 子要素 無:画面全体、有:指定範囲
    return (
      <div className="LockScreenBase">
        {children}
        {this.state.doDisplay &&
          <div className={classNames('LockScreen', { 'area-lock': Children.count(children) > 0 })} />
        }
      </div>
    );
  }
}

/*LockScreen.propTypes = {
  wait: PropTypes.number,       // ミリ秒
  doDisplay: PropTypes.bool,
}*/

LockScreen.defaultProps = {
  wait: 100,                    // 0.1秒
  doDisplay: true,
}

export default LockScreen
